<route lang="json5" type="page">
{
  style: {
    navigationBarTitleText: '快递柜',
  },
}
</route>

<template>
  <view class="bg-white min-h-screen">
    <!-- 快递柜列表 -->
    <view class="px-4 mb-4">
      <view
        class="bg-gray-50 rounded-lg p-4 mb-3 flex items-center"
        @tap="goToLocker(item.id)"
        v-for="item in lockers"
        :key="item.cabinet_code"
      >
        <view class="bg-white rounded-full p-2">
          <image
            src="https://kuaidi.trio.pub/upload/uniapp/delivery/kuaidigui2.png"
            alt=""
            class="w-8 h-8"
          />
        </view>
        <view class="flex-1 ml-3">
          <view class="text-base">{{ item.building }}{{ item.floor }}</view>
          <view class="text-gray-400 text-sm mt-1">快递编码: {{ item.code }}</view>
        </view>
        <view class="text-gray-400">
          <uni-icons type="right" size="16"></uni-icons>
        </view>
      </view>
    </view>
  </view>
</template>

<script lang="ts" setup>
import { computed, onMounted } from 'vue'
import { getCabinetList } from '@/service/index/foo'

interface Locker {
  id: string
  name: string
  deliveryCount: number
  pickupCount: number
  size: 16 | 18
}
const goToLocker = (id: string) => {
  uni.navigateTo({
    url: `/pages/openCabinet/index`,
  })
}
const lockers: any = ref([
  {
    id: '205-16',
    name: '205张先生家快递柜',
    deliveryCount: 3,
    pickupCount: 2,
    size: 16,
  },
  {
    id: '306-16',
    name: '306张先生家快递柜',
    deliveryCount: 3,
    pickupCount: 2,
    size: 16,
  },
  {
    id: '409-16',
    name: '409张先生家快递柜',
    deliveryCount: 3,
    pickupCount: 2,
    size: 16,
  },
  {
    id: '205-18',
    name: '205张先生家快递柜',
    deliveryCount: 3,
    pickupCount: 2,
    size: 18,
  },
  {
    id: '306-18',
    name: '306张先生家快递柜',
    deliveryCount: 3,
    pickupCount: 2,
    size: 18,
  },
  {
    id: '409-18',
    name: '409张先生家快递柜',
    deliveryCount: 3,
    pickupCount: 2,
    size: 18,
  },
])
onMounted(() => {
  fetchLockers()
})
const fetchLockers = async () => {
  try {
    const res = await getCabinetList({
      page: 1,
      size: 10,
    })
    console.log(res)
    // 假设接口返回的数据结构和你图片一致
    lockers.value = res.data
  } catch (error) {
    console.error('获取订单列表失败:', error)
    uni.showToast({
      title: '获取订单列表失败',
      icon: 'none',
    })
  }
}
// const lockers16 = computed(() => lockers.filter((locker) => locker.size === 16))
// const lockers18 = computed(() => lockers.filter((locker) => locker.size === 18))
</script>
